<template>
    <div class="page-setting">
      <!-- 导航栏部分 -->
      <nav-bar navbar-title="设置"></nav-bar>
      <div class="setting-content">
        <!-- 收货地址部分 -->
        <div class="setting-address" @click="goAddressPage_btn">
            <span class="address-text">我的收货地址</span>
            <Icon class="address-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
        </div>
        <!-- 其它部分 -->
        <div class="setting-other">
            <div class="other-item">
                <span class="item-text">授权管理</span>
                <Icon class="item-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
            </div>
            <div class="other-item">
                <span class="item-text">问题反馈</span>
                <Icon class="item-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
            </div>
            <div class="other-item">
                <span class="item-text">联系我们</span>
                <Icon class="item-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
            </div>
            <div class="other-item" @click="closeAnAccount_btn">
                <span class="item-text">账号注销</span>
                <Icon class="item-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
            </div>
        </div>
        <!-- 关于部分 -->
        <div class="setting-about">
            <span class="about-text">关于星辰集市</span>
            <Icon class="about-icon" name="arrow" size="14" color="#dbd8d8"></Icon>
        </div>
        <!-- 退出登录 -->
        <div class="setting-btns">
            <van-button class="btns-item" type="primary" size="small" @click="logout_btn">退出登录</van-button>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
//引入组合式vue
import { ref } from "vue";
//引入导航组件
import NavBar from "@/components/NavBar/NavBar.vue";
//引入vant组件
import { Icon, Button as VanButton, showToast, showConfirmDialog, showSuccessToast } from "vant";
//引入vue-router
import { useRouter } from "vue-router";
const router = useRouter();
//@ts-ignore引入用户仓库
import { useUserStore } from "@/store/userStore.ts";
const userStore = useUserStore();
//@ts-ignore引入请求api
import { reqDeleteUser } from "@/api/user/index.ts";


//跳转到收货地址页
function goAddressPage_btn () {
    showToast("即将跳转...");
    //延时跳转
    setTimeout(() => {
        router.push("/address");
    }, 800);
}
//账号注销
async function closeAnAccount_btn () {
    showConfirmDialog({title: '提示',message:'确定注销此账号吗?此操作不可逆!'})
    .then(async () => {
        // on confirm
        /*1.准备用户名参数
        2.发请求删除该用户
        3.跳转到首页*/
        let username = userStore.userInfo.username || (JSON.parse(localStorage.getItem("userInfo")).username) || (JSON.parse(localStorage.getItem("username")));
        if(username === undefined || username === '') return showToast("未知错误!重新登录!");
        let res = await reqDeleteUser(username);
        if(res.code === 200){
            showSuccessToast("用户注销成功!即将跳转到首页...");
            //清除数据
            userStore.token = "";
            userStore.userInfo.id = 0;
            userStore.userInfo.username = "";
            userStore.userInfo.password = "";
            userStore.userInfo.nickname = "";
            userStore.userInfo.email = "";
            userStore.userInfo.phone = "";
            userStore.userInfo.avatar = "";
            userStore.userInfo.createTime = "";
            userStore.userInfo.updateTime = "";
            localStorage.clear();
            //延时跳转到首页
            setTimeout(() => {
                router.push('/home');
            },800)
        } else {
            showToast("注销失败!");
        }
        console.log('删除平台会员用户api',res);
    })
    .catch(() => {
        // on cancel
        showToast("操作取消!");
    });
}
//退出登录
function logout_btn () {
    /*1.发请求通知服务器退出登录
    2.清除本地的用户数据
    3.跳转到登录页*/
    showConfirmDialog({title: '提示',message:'确定要退出登录吗?'})
    .then(async () => {
        // on confirm
        userStore.token = "";
        userStore.userInfo.id = 0;
        userStore.userInfo.username = "";
        userStore.userInfo.password = "";
        userStore.userInfo.nickname = "";
        userStore.userInfo.email = "";
        userStore.userInfo.phone = "";
        userStore.userInfo.avatar = "";
        userStore.userInfo.createTime = "";
        userStore.userInfo.updateTime = "";
        localStorage.clear();
        //延时跳转到首页
        showToast("即将跳转到首页...");
        setTimeout(() => {
            router.push('/home');
        },800)
    })
    .catch(() => {
        // on cancel
        showToast("操作取消!");
    });
}

</script>

<style lang="less" scoped>
.page-setting{
    width: 375px;
    .setting-content{
        width: 375px;
        height: calc(100vh - 47px);
        position: relative;
        top:47px;
        background: #e4e7e9;
        display: flex;
        flex-direction: column;
        /**收货地址部分 */
        .setting-address{
            width: 360px;
            height: 45px;
            padding: 15px;
            box-sizing: border-box;
            margin: 10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-radius: 5px;
            .address-text{
                font-size: 14px;
                color: #000;
            }
        }
        /**其它部分 */
        .setting-other{
            width: 360px;
            margin: 10px auto;
            padding: 0 15px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 5px;
            .other-item{
                width: 100%;
                height: 45px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e4e7e9;
                &:nth-last-child(1){
                    border:none;
                }
                .item-text{
                    font-size: 14px;
                    color: #000;
                }
            }
        }
        /**关于部分 */
        .setting-about{
            width: 360px;
            height: 45px;
            padding: 15px;
            box-sizing: border-box;
            margin: 10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-radius: 5px;
            .about-text{
                font-size: 14px;
                color: #000;
            }
        }
        /**退出登录 */
        .setting-btns{
            width: 360px;
            margin: 30px auto;
            .btns-item{
                width: 360px;
                height: 40px;
            }
        }
    }
}
</style>